<template>
  <div class="pt-checkbox-group">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "ptCheckboxGroup",
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    value (n) {
      this.$children.forEach(item => {
        if (item.$options._componentTag === "pt-checkbox") {
          if (n.indexOf(item.label) > -1) {
            item.isChecked = true;
          } else {
            item.isChecked = false;
          }
        }
      });
    }
  },
  methods: {
    checkboxClick (label) {
      var
        newVal = this.value.concat();
      var index = newVal.indexOf(label);

      if (index > -1) {
        newVal.splice(index, 1);
      } else {
        newVal.push(label);
      }

      this.$emit("input", newVal);
    }
  }
};
</script>